<template>
	<!--published-->
	<view v-if="loading">
		<!-- {{joinInfo.type}} -->
		<Avatar :info="joinInfo.join_user" :type="1">
			<view class="bidding_synopsis_sel red font-weight">
				<text class="text1 red font-weight">{{ $t('综合排名') }}：</text>
				<text>{{ lang == 'zh' ? joinInfo.num_ranking : changeTextByPm(joinInfo.num_ranking_ru) }}</text>
			</view>
			<view class="bidding_synopsis_sel orange font-weight">
				<text class="text1 orange font-weight">{{ $t('价格排名') }}：</text>
				<text>{{ lang == 'zh' ? joinInfo.price_ranking : changeTextByPm(joinInfo.price_ranking_ru) }}</text>
			</view>
			<view class="bidding_synopsis_sel blue font-weight">
				<text class="text1 blue font-weight">{{ $t('速度排名') }}：</text>
				<text>{{ lang == 'zh' ? joinInfo.speed_ranking : changeTextByPm(joinInfo.speed_ranking_ru) }}</text>
			</view>
		</Avatar>
		<template v-if="joinInfo.type === 'professional'">
			<cooperComByProfessional :item="joinInfo"></cooperComByProfessional>
		</template>
		<template v-if="joinInfo.type === 'transport'">
			<cooperComByTransport :item="joinInfo"></cooperComByTransport>
		</template>
		<template v-if="joinInfo.type === 'goods'">
			<cooperComByGoods :item="joinInfo" :releaseInfo="orderInfo.release_info"></cooperComByGoods>
		</template>
		<template v-if="joinInfo.type === 'crossborder'">
			<cooperComByCrossborder :item="joinInfo" :releaseInfo="orderInfo.release_info"></cooperComByCrossborder>
		</template>
		<view class="cardBox">
			<show-detail :info="joinInfo" :type="detailType"></show-detail>
		</view>
		<!--<view style="height: 100px;"></view>-->
		<view class="my-bottom">
			<view class="my-total">{{ $t('总计') + '：' }}
				<text class="text-total">{{ total }}</text>
				<text class="text-unit">{{ $t(joinInfo.price_unit) }}</text>
			</view>
			<u-button v-if="showBtn === 1" :custom-style="{
                width: '656rpx',
                height: '63rpx',
                background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
                borderRadius: '26rpx'
            }" hover-class="none" type="primary" @click="doCooperate">
				{{ $t('确认合作') }}
			</u-button>
		</view>
		<u-modal @cancel="payCancel" @confirm="payConfirm" :show-cancel-button="true" confirm-text="已付" cancel-text="未付"
			v-model="show" :content="content"></u-modal>
	</view>
</template>

<script>
	import {
		changeTextByPm
	} from '@/utils/index.js'
	import {
		exitCard
	} from "@/common/public";
	import showDetail from "@/components/showDetail.vue";
	import myTitle from "@/components/myTitle.vue";
	import Avatar from "@/components/detail/Avatar.vue"
	import cooperComByGoods from "./com/cooperComByGoods.vue"
	import cooperComByProfessional from "./com/cooperComByProfessional.vue"
	import cooperComByTransport from "./com/cooperComByTransport.vue"
	import cooperComByCrossborder from "./com/cooperComByCrossborder.vue"

	export default {
		data() {
			return {
				loading: false,
				order_id: null,
				join_order_id: null,
				lang: this.$i18n.locale,
				orderInfo: {},
				orderList: [{
						key: "joinInfo.product",
						title: "提供产品",
						message: ""
					},
					{
						key: "joinInfo.price",
						title: "单价",
						message: ""
					},
					{
						key: "orderInfo.release_info.price_unit",
						title: "价格单位",
						message: ""
					},
					{
						key: "joinInfo.speed",
						title: "速度",
						message: ""
					},
					{
						key: "orderInfo.release_info.speed_unit",
						title: "速度单位",
						message: ""
					},
					{
						key: "joinInfo.num",
						title: this.$t('数量'),
						message: ""
					},
					{
						key: "joinInfo.send_time",
						title: "发货时间",
						message: ""
					},
					{
						key: "joinInfo.reach_time",
						title: "送达时间",
						message: ""
					},
					{
						key: "joinInfo.margin_amount",
						title: "保证金",
						message: ""
					},
					{
						key: "joinInfo.join_user.rating",
						title: "评分",
						message: ""
					},
					{
						key: "joinInfo.price_ranking",
						title: "当前价格排名",
						message: ""
					},
					{
						key: "joinInfo.speed_ranking",
						title: "当前速度排名",
						message: ""
					},
					{
						key: "joinInfo.num_ranking",
						title: "当前综合排名",
						message: ""
					},
				], //订单信息详情
				joinInfo: {},
				show: false,
				content: '',
				total: 0,
				detailType: 'order_join',
				showBtn: 1
			}
		},
		components: {
			myTitle,
			showDetail,
			Avatar,
			cooperComByGoods,
			cooperComByProfessional,
			cooperComByTransport,
			cooperComByCrossborder
		},
		onLoad(options) {
			this.order_id = options.order_id
			this.join_order_id = options.join_order_id
			this.showBtn = options.showBtn || 1
			this.getCooperateDetail()
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("合作信息详情")
			})
		},
		methods: {
			changeTextByPm,
			getCooperateDetail() {
				const that = this
				that.$u.api.order.getCooperateDetail({
					order_id: that.order_id,
					join_order_id: that.join_order_id
				}).then(res => {
					that.loading = true
					that.orderInfo = res.orderInfo // 订单数据
					that.joinInfo = res.joinInfo // 合作数据
					that.orderList = exitCard(that.orderList, res)
					// 计算总金额
					if (res.orderInfo.type === 'goods') {
						that.total = that.joinInfo.price * that.joinInfo.num
					} else if (res.orderInfo.type === 'transport') {
						if (res.joinInfo.release_info.release_type === '3') { // 人力少货，重量*价格
							that.total = that.joinInfo.price * that.joinInfo.product_weight
						} else {
							that.total = that.joinInfo.price
						}
					} else if (res.orderInfo.type === 'crossborder') {
						that.total = that.joinInfo.price
					} else {
						that.total = that.joinInfo.price
					}
					console.log(that.joinInfo);
				}).catch(err => {
					console.log(err)
				})
			},
			doCooperate() {
				// 先后台审核，再确认合作信息
				// if (this.orderInfo.type === 'goods') {
				//     if (this.orderInfo.release_info.pay_type.value === '1') {// 预付全款
				//         this.content = '是否付了全款'
				//         this.show = true
				//     } else if (this.orderInfo.release_info.pay_type.value === '2') {// 预付定金
				//         this.content = '是否付了定金'
				//         this.show = true
				//     }
				// } else {
				this.orderCooperate()
				// }
			},
			payCancel() {
				if (this.orderInfo.release_info.pay_type.value === '1') { // 预付全款
					this.$u.toast(this.$t('请先预付全款'), 3000)
				} else if (this.orderInfo.release_info.pay_type.value === '2') { // 预付定金
					this.$u.toast(this.$t('请先预付定金'), 3000)
				}
			},
			payConfirm() {
				this.orderCooperate()
			},
			orderCooperate() {
				const that = this;
				that.$u.api.order.orderCooperate({
					order_id: that.order_id,
					join_order_id: that.join_order_id
				}).then(res => {
					that.$u.toast(this.$t('操作成功，请等待后台审核'), 3000)
					setTimeout(() => {
						this.$u.route({
							url: '/pages/tabbar/order/index',
							type: 'switchTab'
						})
					}, 2000)
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cardBox {
		width: 90%;
		box-shadow: 0 0 10px #ddd;
		border-radius: 10px;
		padding: 10px 12px;
		margin: 0 auto;
		margin-bottom: 20rpx;
		font-size: 30rpx;
		position: relative;
		color: #262626;
	}

	.bidding_synopsis_sel {
		font-size: 28rpx;
		color: #888888;
		// line-height: 50rpx;
		display: flex;

		&.font-weight {
			font-weight: 600;
			justify-content: space-between;
		}

		// border-bottom: 1rpx solid #eee;
		&.red {
			color: #ff0000;
		}

		&.orange {
			color: #ff5400;
		}

		&.blue {
			color: #00a2ff;
		}

		.text1 {
			font-weight: 400;
			color: #0B0B0B;

			&.font-weight {
				font-weight: 600;
			}

			&.red {
				color: #ff0000;
			}

			&.orange {
				color: #ff5400;
			}

			&.blue {
				color: #00a2ff;
			}
		}
	}

	.publish {
		padding-top: 19.19rpx;
		height: 93vh;
		background-color: #F7F7F7;
		overflow-y: scroll;

		.publish_cooperation {
			display: flex;
			flex-direction: column;

			.publish_btn {
				margin-top: -31rpx;
				border-top: 2rpx solid #E9E9E9;
				height: 108.14rpx;
				background-color: $my-bgColorFFFFFF;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				padding: 10.91rpx;

				view {
					width: 171rpx;
					height: 49rpx;
					margin-left: 10.91rpx;
				}
			}
		}
	}

	.my-bottom {
		width: 100%;
		//position: fixed;
		//z-index: 999;
		//bottom: 0;
		//left: 0;
		height: 240rpx;
		padding: 40rpx;
		background-color: $my-bgColorFFFFFF;

		.my-total {
			margin-bottom: 60rpx;

			.text-total {
				color: #DD2910;
			}

			.text-unit {
				margin-left: 10rpx;
			}
		}

	}
</style>